<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- saved from url=(0014)about:internet -->
    <link type="text/css" rel="stylesheet" href="css/boot.css" media="all">
    <title>Jam-Demo</title>
    <link rel="Stylesheet" type="text/css" href="google-code-prettify/prettify.css" />
    <script type="text/javascript"  src="google-code-prettify/prettify.js"></script>
    <script type="text/javascript" src="../js/jam.js"></script>
    <script type="text/javascript">
        $(function(){
            prettyPrint();
            var $a1 = $('#a1'), $a2 = $('#a2'),a;
            var amt1 = $a1.animate({
                from: {left: '0px'},
                to: {left: '300px'},
                sec: 500,
                onStart: function() {
                    a = this;
                }
            });
            var amt2 = $a2.animate({
                from: {left: '400px'},
                to: {left: '800px'},
                sec: 1700,
                onStart: function() {
                    a = this;
                },
                upgradeFunc: function (ctx,fn,fp) {
                    if(fp > 2 * fn) return null;
                    var obj = {left: 400 + (600 * Math.sin(Math.PI / 2 * (fp / fn)))};
                    obj.left += 'px';
                    return obj;
                },
                onStop: function() {
                    a = amt1;
                }
            });

            amt1.join(amt2);


            $('#clickBtn').click(function () {
                a = a || amt1;
                a.start();
            });
            $('#clickBtn2').click(function () {
                a.pause();
            });

        });
    </script>
</head>
<body style="overflow-x: hidden">

    <h3>Animate Object</h3>
    <h5>说明</h5>
    <pre>
        Animate Object 是 $(expr).animate(config) 的返回值，可以通过它构造更加复杂的动画
    </pre>
    <h5>属性及方法</h5>
    <pre class="prettyprint">
        {
            // 开始执行动画
            start : function () { .. }
            // 停止执行动画，并且回到初始状态
            stop : function () { .. }
            // 暂停动画，再次调用start后从暂停处继续执行
            pause : function () { .. }
            /**
             * 将另一个动画添加到当前动画，两个动画将并行执行
             * @param animate // Animate Object 对象
             **/
            add : function (animate) { .. }
            /**
             * 将另一个动画添加到当前动画，该动画将在当前动画执行完成之后开始执行
             * @param animate // Animate Object 对象
             **/
            join : function (animate) { .. }
        }
    </pre>
    <h3>示例</h3>
    <div style="width: 100%;height: 100px;padding: 10px;position: relative">
        <div id="a1" style="position: absolute;width: 100px;height: 80px;left: 0;top:0;background: green">

        </div>
        <div id="a2" style="position: absolute;width: 100px;height: 80px;left: 400px;top:0;background: orange">

        </div>
    </div>

    <button id="clickBtn" value="start!">start!</button>

    <button id="clickBtn2" value="start!">pause!</button>

    <pre class="prettyprint linenums">
                      var $a1 = $('#a1'), $a2 = $('#a2'),a;
            var amt1 = $a1.animate({
                from: {left: '0px'},
                to: {left: '300px'},
                sec: 500,
                onStart: function() {
                    a = this;
                }
            });
            var amt2 = $a2.animate({
                from: {left: '400px'},
                to: {left: '800px'},
                sec: 1700,
                onStart: function() {
                    a = this;
                },
                upgradeFunc: function (ctx,fn,fp) {
                    if(fp > 2 * fn) return null;
                    var obj = {left: 400 + (600 * Math.sin(Math.PI / 2 * (fp / fn)))};
                    obj.left += 'px';
                    return obj;
                },
                onStop: function() {
                    a = amt1;
                }
            });

            amt1.join(amt2);


            $('#clickBtn').click(function () {
                a = a || amt1;
                a.start();
            });
            $('#clickBtn2').click(function () {
                a.pause();
            });
    </pre>



<script type="text/javascript" src="boot.js"></script>
</body>
</html>